<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="renderer" content="webkit" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!--
      <script src="https://files.cnblogs.com/files/jingmoxukong/canvas-nest.min.js"></script>
    -->
  </head>
  <body>
    <input type="file" name="file" id="file" />
    <img src="" alt="" class="preview" />
    <!-- <p class="num">0</p> -->


    <br />
  </body>
  <!--
    <script src="./canvas-nest.min.js" color="0,0,255" opacity='0.6' zIndex="-2" count="99"></script>
  -->
  <!--
    <script type="text/javascript" alpha="0.2" src="http://cdn.atool.org/res/ribbon.min.js"></script>
  -->

  
    <!-- <script src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.js" color="255,0,0" opacity='0.6' zIndex="-2" count="99"></script> -->
    <!-- <script type="text/javascript" alpha="0.2" src="./ribbon.min.js"></script> -->
 

  <script>
    $(function() {
      $("#file").on("change", function(e) {
        // console.log(e);
        // console.log(e.target.files);
        console.log(e.target.files[0]);

        var reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        // reader.readAsBinaryString(e.target.files[0]);
        // reader.readAsText(e.target.files[0])
        reader.onload = function(e) {
          console.log(e.target.result); // 上传的图片的编码
          $(".preview").attr("src", e.target.result);
        };
      });

      // setInterval(() => {
      //   console.log($(".num").text());
      //   $(".num").text($(".num").text()*1 + 1);
      // }, 1000);
    });
  </script>
</html>
